<template>
  <el-card>
    <!-- <FilterBox :column="column" :data-obj.sync="listQuery" @search="fetchData" /> -->
    <el-row class="mt10 mb10"> </el-row>
    <Table :field-list="fieldList" :data="list">
      <template v-slot:set="{ row }">
        <el-button type="text" @click="toEdit(row)">编辑</el-button>
        <el-button type="text" @click="viewDetail(row)">详情</el-button>
      </template>
    </Table>
    <el-dialog
      title="关键词调整"
      :visible.sync="dialogVisible"
      width="80%"
      class="theme-dialog"
    >
      <div class="container-dialog">
           <el-form
            ref="form"
            :model="ruleForm"
            :rules="rules"
            style="width: 700px"
            label-position="right"
            label-width="100px"
          >
            <el-form-item label="页面名称" prop="name">
              {{ruleForm.name}}
            </el-form-item>
            <el-form-item label="标题" prop="title">
              <el-input v-model="ruleForm.title" :readonly="isDetail" placeholder="请输入" maxlength="50" />
            </el-form-item>
            <el-form-item label="keywords" prop="keywords">
              <el-input
                v-model="ruleForm.keywords"
                placeholder="请输入"
                :readonly="isDetail"
                maxlength="250"
              />
            </el-form-item>
            <el-form-item label="description" prop="description">
              <el-input
                v-model="ruleForm.description"
                :readonly="isDetail"
                placeholder="请输入"
                maxlength="250"
              />
            </el-form-item>
          </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" v-show="!isDetail" @click="confirm">确 定</el-button>
      </div>
    </el-dialog>
    <Pagination
      v-show="listQuery.total > 0"
      :total="listQuery.total"
      :page.sync="listQuery.pageNumber"
      :limit.sync="listQuery.pageSize"
      @pagination="fetchData"
    />
  </el-card>
</template>

<script>
import { getKeywordsList, editKeywords } from "@/api/index";
import FilterBox from "@/components/FilterBox/index.vue";
import Table from "@/components/Table/index.vue";
import Pagination from "@/components/Pagination/index.vue";
export default {
  name: "Pages",
  components: { FilterBox, Table, Pagination },
  data() {
    return {
      isDetail: false,
      ruleForm: {
        id: '',
        name: '',
        title: '',
        keywords: '',
        description: ''
      },
      rules: {
        title: [{ required: true, message: "请输入标题", trigger: "blur" }],
        keywords: [{ required: true, message: "请输入关键词", trigger: "blur" }],
        description: [{ required: true, message: "请输入描述", trigger: "blur" }]
      },
      currentRole: "keywords",
      dialogVisible: false,
      listQuery: {
        pageNumber: 1,
        pageSize: 20,
        total: 0,
      },
      column: [
        {
          type: "select",
          label: "类型",
          fieldName: "category_id",
          list: () => this.lst_cate,
          labelField: "name",
          valueField: "id",
        },
      ],
      fieldList: [
        {
          label: "操作",
          prop: "set",
          type: "slot",
          slotName: "set",
          width: "160",
        },
        { label: "具体页面", prop: "name", minWidth: "120" },
        { label: "标题", prop: "title", minWidth: "120" },
        { label: "keywords", prop: "keywords", minWidth: "120" },
        { label: "description", prop: "description", width: "170" },
      ],
      list: [],
      lst_cate: [],
    };
  },
  async created() {
    const res = await getKeywordsList();
    this.lst_cate = res.data.list || [];
    this.fetchData();
  },
  methods: {
    async fetchData() {
      const res = await getKeywordsList(this.listQuery);
      this.list = res?.data.list || [];
      this.listQuery.total = res.data.total;
    },
    toEdit(row, type) {
      this.isDetail = type
      this.ruleForm.id = row.id
      this.ruleForm.name = row.name
      this.ruleForm.title = row.title
      this.ruleForm.keywords = row.keywords
      this.ruleForm.description = row.description
      this.dialogVisible = true
    },
    viewDetail(row) {
      this.toEdit(row, true)
    },
    async confirm() {
      await this.$refs.form.validate();
      const res = await editKeywords({
        id: this.ruleForm.id,
        title: this.ruleForm.title,
        keywords: this.ruleForm.keywords,
        description: this.ruleForm.description
      })
      if (res.code == 1) {
        this.$message({
          type: "success",
          message: "成功",
        });
        this.created()
        this.dialogVisible = false
      } else {
        this.$message({
          type: "error",
          message: "失败",
        });
      }
    }
  },
};
</script>
